<template>
  <div class="login-container">
    <el-form
      ref="loginFormRef"
      class="login-form"
      :model="loginForm"
      :rules="loginRules"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">
          {{ $t('login.title') }}
        </h3>
      </div>

      <el-form-item prop="username">
        <el-icon :size="20">
          <User />
        </el-icon>
        <el-input
          v-model="loginForm.username"
          :placeholder="$t('login.username')"
          type="text"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-icon :size="20">
          <Lock />
        </el-icon>
        <el-input
          v-model="loginForm.password"
          :placeholder="$t('login.password')"
          type="password"
          show-password
        />
      </el-form-item>

      <el-button
        class="login-btn"
        :loading="loading"
        type="primary"
        @click="handleLogin(loginFormRef)"
      >
        {{ $t("login.logIn") }}
      </el-button>

      <div style="position: relative;">
        <div class="tips">
          <span>{{ $t("login.username") }} : admin </span>
          <span>{{ $t("login.password") }} : {{ $t("login.any") }} </span>
        </div>
        <div class="tips">
          <span>{{ $t("login.username") }} : editor </span>
          <span>{{ $t("login.password") }} : {{ $t("login.any") }} </span>
        </div>

        <el-button
          class="thirdparty-button"
          type="primary"
        >
          {{ $t("login.thirdparty") }}
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import router from '@/router'

const loading = ref(false)

const loginFormRef = ref()
const loginForm = reactive({
  username: 'admin',
  password: 'admin'
})
const loginRules = reactive({
  username: [{ required: true, message: 'please input username', trigger: 'blur' }],
  password: [{ required: true, message: 'please input password', trigger: 'blur' }]
})

const handleLogin = (formEl) => {
  if (!formEl) {
    return
  }

  formEl.validate(async(valid) => {
    if (valid) {
      try {
        loading.value = true
        // const { data } = await login({
        //   ...loginForm,
        //   password: md5(loginForm.password)
        // })
        // await handleGetRoutes()
        loading.value = false
        router.push('/')
      } catch {
        // loading.value = false
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  color: #454545;
  border-radius: 5px;

  .el-input {
    flex: 1;

    .el-input__wrapper {
      height: 45px;
      background-color: transparent;
      box-shadow: none;
    }
  }

}

.el-radio {
  color: #999;
}

.login-container {
  overflow: hidden;
  width: 100%;
  height: 100%;

  .video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.login-form {
  position: relative;
  overflow: hidden;
  padding: 160px 35px 0;
  margin: 0 auto;
  width: 520px;
  max-width: 100%;

  .title-container {
    position: relative;

    .title {
      margin: 0 auto 40px;
      font-size: 26px;
      text-align: center;
      color: #eee;
      font-weight: bold;
    }

    .set-language {
      position: absolute;
      top: 20px;
      right: 0;
      font-size: 22px;
      color: #fff;
      cursor: pointer;
    }
  }

  .el-icon {
    margin-left: 15px;
    color: #666;
  }

  .tips {
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }
}

.login-btn {
  margin-bottom: 30px;
  width: 100%;
  height: 40px;
}
</style>
